.jxtech-message-drawer {
  .jxtech-msg-box-header {
    border-bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 20px;

    > span:nth-child(1) {
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
      color: var(--el-color-primary) !important;
    }
    .el-button {
      span {
        font-size: 12px !important;
      }
    }
  }
  .el-drawer__body {
    padding: 0;
    .el-tabs {
      height: 100%;
      .el-tabs__header {
        margin-bottom: 10px;
        box-sizing: border-box;
      }
      .el-tabs__content {
        height: calc(100% - 50px);
        .el-tab-pane {
          position: relative;
          height: 100%;
          overflow: auto;
          .el-empty {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
          }

          .jxtech-msg-item-box {
            .jxtech-msg-item {
              //   padding: 10px 20px;
              border-bottom: 1px solid #eee;
              padding: 10px;

              &:hover {
                .jxtech-msg-item-theme {
                  //   white-space: unset !important;
                  //   text-overflow: unset !important;
                }
              }

              .jxtech-msg-item-title {
                color: #000;
                font-weight: 600;
                line-height: 20px;
                flex: 1 1 auto;
                min-width: 20px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                margin-bottom: 5px;
              }

              .jxtech-msg-item-info {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                .jxtech-msg-item-info-tag {
                  display: block;
                }
                .jxtech-msg-item-info-time {
                  color: rgb(150, 150, 150);
                }
              }

              .jxtech-pend-item-title {
                color: #000;
                font-weight: 600;
                line-height: 20px;
                flex: 1 1 auto;
                min-width: 20px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                margin-bottom: 5px;
              }

              .jxtech-pend-item-info {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                .jxtech-msg-item-info-tag {
                  display: block;
                }
                .jxtech-msg-item-info-time {
                  color: rgb(150, 150, 150);
                }
              }
            }
          }

          .no-more-text {
            width: 100%;
            padding: 20px 0;
            color: #999;
            text-align: center;
            box-sizing: border-box;
          }
        }
      }
    }
  }
}
